<template>
  <div style='padding-top: -10px;'>
    <a-input v-model='FileUrl' placeholder='可直接填入文件地址' :style='{width: width}' clearable />
    <a-upload
      :action='api.file.upload'
      :headers='accessToken'
      :accept='accept'
      :data='data'
      :beforeUpload='beforeUpload'
      @change='handleChange'
      :showUploadList='false'
      ref='up'
      class='upload'
    >
      <a-button :loading='loading' icon='ios-cloud-upload-outline' style='clear:both'>{{ btnText }}</a-button>
    </a-upload>
    <p>文件大小不超{{ fileMaxSize }}{{ sizeUnit }} {{ tip }}</p>
  </div>
</template>

<script>
import Vue from "vue"

export default {
  name: "UploadFile",
  model: {
    prop: "value",
    event: "change.value"
  },
  props: {
    width: {
      type: String,
      default: "250px"
    },
    fileSize: {
      default: 204800
    },
    value: {
      type: [String, Array],
      default: ""
    },
    tip: {
      type: String,
      default: ""
    },
    accept: {
      type: [String],
      default: ".*"
    }
  },
  computed: {
    fileMaxSize: {
      get: function() {
        if (this.fileSize >= 1024 && this.fileSize < 1048576) {
          this.sizeUnit = "M"
          return Number(this.fileSize / 1024).toFixed(2)
        }
        if (this.fileSize >= 1048576) {
          this.sizeUnit = "G"
          return Number(this.fileSize / 1024 / 1024).toFixed(2)
        } else {
          this.sizeUnit = "KB"
          return this.fileSize
        }
      }
    }
  },
  watch: {
    value(value) {
      console.info("视频地址：", value)
      if (value != "" && typeof value == "string") {
        this.FileUrl = value
      }
    }
  },
  data() {
    return {
      accessToken: {},
      sizeUnit: "KB",
      data: {
        fileType: "video"
      },
      FileUrl: "",
      fileId: "",
      removeIds: [],
      loading: false,
      viewImage: false,
      btnText: "选择文件"
    }
  },
  methods: {
    init() {
      const token = Vue.ls.get("Access-Token")
      this.accessToken = {
        Authorization: token
      }
    },
    handleFormatError(file) {
      this.loading = false
      this.$notification.warning({
        title: "不支持的文件格式",
        desc: "所选文件‘ " + file.name + " ’格式不正确, 请选择" + this.accept + "格式文件"
      })
    },
    handleMaxSize(file) {
      this.loading = false
      this.$notification.warning({
        title: "文件大小过大",
        desc: "所选文件‘ " + file.name + " ’大小过大,不得超过" + this.fileMaxSize + this.sizeUnit
      })
    },
    beforeUpload() {
      this.loading = true
      this.btnText = "上传中..."
      this.$emit("on-before")
      return true
    },
    handleError(error, file, fileList) {
      this.loading = false
      this.$message.error(error.toString())
    },
    inputChange(e) {
      this.FileUrl = e.target.value
    },
    getPross() {
      // var intervalId = setInterval(function() {
      //   $.get("${base}/file/item/percent", {}, function(data) {
      //     console.log(data)
      //     var percent = data
      //     if (percent >= 100) {
      //       clearInterval(intervalId)
      //       percent = 100//不能大于100
      //     }
      //     $("#id_percent").val(percent)
      //   }, "json")
      // }, 100)
    },
    handleChange({ file, fileList, event }) {
      if (file.status != "uploading") {
        let url = ""
        if (file.response) {
          url = file.response.data.url
          this.fileId = file.response.data.uid
          this.btnText = "上传文件"
          this.loading = false
        }
        if (file.status == "removed") {
          if (file.response) {
            this.removeIds.push(file.response.data.uid)
          } else {
            this.removeIds.push(file.uid)
          }
        }
        this.$emit("change", url, file, this.fileId, this.removeIds)
      }
    }
  },
  created() {

    this.init()
    if (this.value) {
      this.FileUrl = this.value
    }
  }
}
</script>

<style lang='less'>
.upload {
  display: inline-block;
  margin-left: 10px;
}
</style>

